import {$} from '../js/library/jquery.js';
import {cookie} from '../js/library/cookie.js';
import {querystring} from '../js/library/qs.js';

let id = location.search.split('=')[1];

$.ajax({
  type: "get",
  url: "../../interface/getItem.php",
  data: {
      id: id
  },
  dataType: "json",
  success: function(res) {
    let picture = JSON.parse(res.picture);
    $('.small>img').attr('src',`${picture[1].src}`);
    $('.big>img').attr('src',`${picture[1].src}`);
    $('#list>li>img:first').attr('src',`${picture[1].src}`);
    $('#list>li>img:eq(1)').attr('src',`${picture[2].src}`);
    $('#list>li>img:eq(2)').attr('src',`${picture[3].src}`);
    $('#list>li>img:eq(3)').attr('src',`${picture[4].src}`);
    $('#list>li>img:eq(4)').attr('src',`${picture[5].src}`);
    $('#list>li>img:eq(5)').attr('src',`${picture[6].src}`);
    $('#list>li>img:last').attr('src',`${picture[7].src}`);
    $('.pro-title').append(`${res.intro}`)
    $('.pro-pri2').html(`<span>￥</span>${res.price}`)
    $('.pro-check2>img').attr('src',`${picture[1].src}`);
    $('.pro-check2>span').html(`${res.type}`);
    $('.already-span2').html(`${res.type}`);

    $('.product').find('.xiadan>.input1').on('click', function() {
      addItem(res.id, res.price, $('#pro-xiadan').val());
    });
  }
})

function addItem(id, price, num) {
  let shop = cookie.get('shop');

  let product = {
      id:id,
      price:price,
      num:num
  }

  // 判断当前cookie中是否有购物数据
  if (shop) { // 如果有数据 取出是一个字符串
      shop = JSON.parse(shop);

      // 添加之前先要判断数据中有没有该商品
      if (shop.some(el => el.id === id)) {
          let _index = shop.findIndex(elm => elm.id == id);
          let count = parseInt(shop[_index].num);
          count += parseInt(num);
          shop[_index].num = count;
      } else {
          shop.push(product);
      }


  } else { // 第一次没有数据的情况 创建一个新数据
      shop = [];
      shop.push(product);
  }

  cookie.set('shop', JSON.stringify(shop), 1);
}


// 放大镜
let small = $(".product-pic>.small");
let mark = $(".mark");
let big = $(".product-pic>.big");
let bigImg = $(".big>img");
let smallImg = $(".small>img");

small.on("mouseover", function () {
  mark.addClass("show");
  big.addClass("show");

  small.on("mousemove", function (ev) {
    // 设置mark的宽高，根据比例
    mark.css({
      width: (big.width() * small.width()) / bigImg.width() + "px",
      height: (big.height() * small.height()) / bigImg.height() + "px",
    });

    // 保持鼠标始终在mark的中心
    let left = parseInt(ev.pageX - mark.width() +38);
    let top = parseInt(ev.pageY - mark.height() -45);
    
    // 边界判断
    if (left <= 0) {
      left = 0;
    } else if (left >= small.width() - mark.width()) {
      left = small.width() - mark.width();
    }
    if (top <= 0) {
      top = 0;
    } else if (top >= small.height() - mark.height()) {
      top = small.height() - mark.height();
    }

    //  设置mark的定位
    mark.css({
      left: left + "px",
      top: top + "px",
    });

    // 大图片移动比例
    let r = bigImg.width() / small.width();

    // 设置大图移动距离
    bigImg.css({
      top: r * -top + "px",
      left: r * -left + "px",
    });
  });
});

small.on("mouseout", function () {
  mark.removeClass("show");
  big.removeClass("show");
});

// 左右角点击移动
// 下一张
let marginLeft = 0;
$('.product-left>.next').on('click',function(){
  let left=parseInt($('.product-tiao>#list').css('left'));
  left -= 75;
  $('.product-tiao>#list').css('left',left);
  if(left <= -150){
    $('.product-left>.next').off('click');
  }
});
// 鼠标移入移出颜色变化
$('.product-left>.next').on('mouseover',function(){
  $(this).css('background-color','rgba(0,0,0,0.1');
});
$('.product-left>.next').on('mouseout',function(){
  $(this).css('background-color','transparent');
});

// 上一张
$('.product-left>.back').on('click',function(){
  let l = parseInt($('.product-tiao>#list').css('left'));
  l += 75;
  $('.product-tiao>#list').css('left',l);
  if(l >= 0){
    $('.product-left>.back').off('click');
  }
})
$('.product-left>.back').on('mouseover',function(){
  $(this).css('background-color','rgba(0,0,0,0.1');
});
$('.product-left>.back').on('mouseout',function(){
  $(this).css('background-color','transparent');
});

// 鼠标悬停图片有红色边框,且框里是这张图
$('.product-tiao>#list>li>img').on('mouseover',function(){
  $(this).css('border','1px solid red');

  smallImg.attr("src", $(this).attr("src"));
  bigImg.attr("src", $(this).attr("src"));
})
// 鼠标移开消失
$('.product-tiao>#list>li>img').on('mouseout',function(){
  $(this).css('border','none');
})

// 加入数量
$("#plus").on('click',function(){
  $('#pro-xiadan').val(+($('#pro-xiadan').val())+1);
  $('#minus').css({
    'color':'#777',
    'cursor':'pointer'
  });
})
// 减少数量
$('#minus').on('click',function(){
  $('#pro-xiadan').val(+($('#pro-xiadan').val())-1);
  if($('#pro-xiadan').val() <=1){
    $('#minus').css({
      'color':'#c4c4c4',
      'cursor':'not-allowed'
    });
    $('#pro-xiadan').val(1);
    $('#minus').off('click');
  }
})

// 粘性导航
$(window).on('scroll',function(){
  // 出现'加入购物车按钮'
  $(".nav").each(function(){
      let scrollTop = $(window).scrollTop();
      let nap_top = $(this).offset().top;
        if(nap_top-scrollTop <= 0){
           $('.addChe').css('display','block'); 
        }else{
          $('.addChe').css('display','none'); 
        }
        // 页面滚轮
          if($('#guige').offset().top > (scrollTop+60) && (scrollTop+60) >= $('#pro-pic').offset().top){
            $('.nav>.tabs>a').removeClass("selected").eq(0).addClass("selected");
          }else if($('#pack').offset().top > (scrollTop+60) && (scrollTop+60) >= $('#guige').offset().top){
            $('.nav>.tabs>a').removeClass("selected").eq(1).addClass("selected");
          }else if((scrollTop+60) >= $('#pack').offset().top){
            $('.nav>.tabs>a').removeClass("selected").eq(2).addClass("selected");
          }
        })
      })
// 内容点击
$('.nav>.tabs>a').on('click',function(){
  $(this).addClass("selected").siblings().removeClass("selected");
  
})

// 底部导航栏
// 右边角
$('.double>.sec>span:last-child').on('click',function(){
  $(this).css('cursor','not-allowed').siblings().css('cursor','pointer');

  $('.double>.ul1').animate({'margin-left':'-153px'},'normal');
})
// 左边角
$('.double>.sec>span:first-child').on('click',function(){
  $(this).css('cursor','not-allowed').siblings().css('cursor','pointer');
  
  $('.double>.ul1').animate({'margin-left':'0'},'normal');
})